<!-- markdown编辑器的上传对话框 -->
<div class="modal fade" id="markdown-modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">X</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">上传本地图片</h4>
			</div>
			<div class="modal-body">
				<p id="markdown-upload-picker" style="display: none"></p>
				<div id="markdown-upload-action">
				</div>
				<button class="btn btn-success" id="btn-markdown-upload">点击上传本地图片</button>
				<p class="text-muted">仅支持gif,jpg,jpeg,bmp,png格式图片文件，大小在10M以内</p>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	//本地图片上传依赖web uploader，需要程序引入web uploader
	//图片会被压缩后上传
	var uploader = WebUploader.create({
		swf:"/static/ext/WebUploader/Uploader.swf",
		server:"/markdown/upload",
		pick:"#markdown-upload-picker",
		accept:{
		    title: 'Images',
		    extensions: 'gif,jpg,jpeg,bmp,png',
		    mimeTypes: 'image/*'
		},
		thumb:{
			width:300,
			heigth:300,
			quality:80,
			allowMagnify:true,
			crop:false,
			type:'image/jpeg'
		},
		compress:{
			width:800,
			height:800,
			// 图片质量，只有type为`image/jpeg`的时候才有效。
			quality: 90,
			// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
			allowMagnify: false,
			// 是否允许裁剪。
			crop: false,
			// 是否保留头部meta信息。
			 preserveHeaders: true,
			 // 如果发现压缩后文件大小比原来还大，则使用原来图片
			 // 此属性可能会影响图片自动纠正功能
			 noCompressIfLarger: true,
			 // 单位字节，如果图片大小小于此值，不会采用压缩。
			 compressSize: 1024*100
		},
		threads:1,
		sendAsBinary:true,
		fileNumLimit:1,
		fileSingleSizeLimit:1024*1024*10
	});
	//加入文件失败提示
	uploader.on("error", function(type) {
		var msg = "加入文件失败";
		if (type == "F_EXCEED_SIZE") {
			msg = "文件过大，不能超过10M";
		} else if (type == "Q_EXCEED_NUM_LIMIT") {
			msg = "文件总数超出限制，最多只能同时添加1张图片";
		} else if (type == "Q_EXCEED_SIZE_LIMIT") {
			msg = "文件大小超出限制";
		} else if (type == "Q_TYPE_DENIED") {
			msg = "不支持的文件格式";
		}
		alert(msg);
	});
	uploader.on("fileQueued",function(file){
		$("#btn-markdown-upload").hide();
		uploader.makeThumb( file, function( error, ret ) {
			if(error){
				$("#markdown-upload-action").prepend("<p class='text-danger'>图片无法预览</p>");
				return;
			}
			$("#markdown-upload-action").append("<p><img src='"+ret+"'></p>");
			$("#markdown-upload-action").append("<div><button class='btn btn-primary w150' id='btn-ensure'>确定</button>&nbsp;"+
					"<button class='btn btn-default w150' id='btn-cancel'>取消</button></div>");
		},300,300);
	});
	uploader.on("uploadProgress",function(file,percent){
		var progress = $("#markdown-upload-action").children(".progress");
		if(!progress.length){
			progress = $('<div class="progress"><div class="progress-bar progress-bar-success" style="width: 0%"></div></div>');
			$("#markdown-upload-action").html(progress);
		}
		progress.children(".progress-bar").css("width",(percent*100)+"%");
	});
	uploader.on("uploadSuccess",function(file,json){
		$("#markdown-upload-action").empty();
		$("#btn-markdown-upload").show();
		//插入图片代码，将说明文字选中
		var markdown = $("#markdown-modal").data("markdown");
		var selected = markdown.getSelection();
		var start = selected.start+2;
		var end = start+6;
		markdown.replaceSelection("![输入图片说明]("+json.url+")");
		markdown.setSelection(start,end);
		$("#markdown-modal").modal("hide");
	});
	uploader.on("uploadError",function(file,reason){
		alert("上传发生错误");
		$("#markdown-upload-action").empty();
		$("#btn-markdown-upload").show();
		
	});
	$("#markdown-upload-action").on("click","#btn-cancel",function(){
		$("#markdown-upload-action").empty();
		var files = uploader.getFiles();
		for(var i=0;i<files.length;i++){
			uploader.removeFile(files[i],true);
		}
		$("#btn-markdown-upload").show();
	});
	$("#markdown-upload-action").on("click","#btn-ensure",function(){
		uploader.upload();
	});
	$("#btn-markdown-upload").click(function(){
		$("#markdown-upload-picker").find(":file").trigger("click");
	});
</script>